{% extends 'base.html' %}
{% load static %}

{% block title %}发布{% endblock %}
{% block head %}
    <!-- 引入 jQuery以ajax发送数据而不是表单 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{% static 'js/pub_blog.js' %}"></script>
    <!-- wangeditor的css和js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}
{% block main %}
    <h1>发布博客</h1>
    <div class="mt-2">
        <form action=" " METHOD="post">
            {% csrf_token %}
            <div class="mb-2">
                <label for="title" class="form-label">标题</label>
                <input class="form-control" id="title" name="title">
            </div>
            <div class="mb-2">
                <label for="category" class="form-label">分类</label>
                <select name="category" id="category" class="form-control">
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}

                </select>
            </div>
            <div class="mb-2">
                <label class="form-label">内容</label>
                {#富文本编辑器  wangEditor#}
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </div>
            <div class="text-end mb-2">
                <button type="button" class="btn btn-primary" id="submit-btn">发布</button>
            </div>
        </form>
    </div>
{% endblock %}